import React, { useState } from 'react'
import { Alert, RefreshControl, ScrollView, View } from 'react-native'
import { Avatar, BottomSheet, Button, Header, ListItem, Text } from 'react-native-elements'
import Orientation from 'react-native-orientation'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import { debounce, globalColor, MygoBack, pxPage, throttle, _defStyle } from '../../common/Common'
import { Share_qq, Share_qq_zone, Share_qq_zone_lib, Share_copyShare_ } from '../../redux/actions/Share_action'
import styles from './style'

const List = [
    {
        buttonStyle: {},
        iconname: "folder-open-o",
        press: (navigation) => {
            navigation.push('Offlinecaching')
        },
        text: '离线缓存'
    },
    {
        buttonStyle: {},
        iconname: "history",
        press: (navigation) => {
            navigation.push('Historyseting')
        },
        text: '历史记录'
    },
    {
        buttonStyle: {},
        iconname: "star-o",
        press: (navigation) => {
            navigation.push('Mycollection')
        },
        text: '我的收藏'

    },
    {
        buttonStyle: {
            transform: [{ rotate: '180deg' }]
        },
        iconname: "edit",
        press: (navigation) => {
            navigation.push('Feedback')
        },
        text: '反馈意见'
    },
]

const F4 = (props) => {
    const { navigation, list } = props;
    return (
        <>
            {
                list.map((item, index) => {
                    return (
                        <View key={index} style={{ flexDirection: 'column', justifyContent: 'space-around', alignItems: 'center' }}>
                            <Button
                                buttonStyle={[styles.buttonStyle, item.buttonStyle]}
                                icon={
                                    <FontAwesome name={item.iconname} size={pxPage(30)} color={globalColor.defaultColor}></FontAwesome>
                                }
                                onPress={throttle(() => {
                                    item.press(navigation)
                                }, 2000)}
                            ></Button>
                            <Text style={{ marginTop: pxPage(10), color: globalColor.defaultFontColor_dis }}>{item.text}</Text>
                        </View>
                    )
                })
            }
        </>
    )
}

export const MyListitem = (props) => {
    const { list } = props;
    return (
        list.map((item, index) => {
            return (
                <ListItem
                    key={index}
                    containerStyle={{ backgroundColor: globalColor.defaultBackgroundColor }}
                    onPress={debounce(() => {
                        item.onpress()
                    }, 200)}
                // 神奇
                >
                    <FontAwesome name={item.icon} size={pxPage(20)} color={globalColor.defaultColor} />
                    <ListItem.Content>
                        <ListItem.Title style={{ color: globalColor.defaultFontColor_dis }}>{item.title}</ListItem.Title>
                    </ListItem.Content>
                    <FontAwesome name='angle-right' size={pxPage(20)} color={globalColor.defaultFontColor_dis}></FontAwesome>
                </ListItem>
            )
        })

    )
}

const Mine = (props) => {
    const [refresh, setRefresh] = useState(false)

    const { navigation, login } = props;
    const [isVisible, setIsVisible] = useState(false);

    MygoBack(props)
    Orientation.lockToPortrait();
    const List_ListItem = [
        {
            title: '消息通知',
            icon: 'commenting-o',
            onpress: () => navigation.push('Messagenotification')
        },
        {
            title: '分享应用',
            icon: 'share-alt',
            onpress: () => setIsVisible(true)
        },
        {
            title: '给个好评',
            icon: 'thumbs-o-up',
            onpress: () => navigation.push('Praise')
        },
        {
            title: '缓存管理',
            icon: 'cloud-download',
            onpress: () => navigation.push('Cachemanagement')
        },
        {
            title: '设置',
            icon: 'gear',
            // onpress: () => navigation.push('MySeting')
        },
        {
            title: '视频播放',
            icon: 'gear',
            onpress: () => navigation.push('Demo')
        }
    ]
    const list3 = [
        {
            title: '微信',
            icon: 'weixin',
            icon_color: globalColor.defaultIconColor_Weixin,
            background_color: globalColor.defaultBackgroundColor_Weixin,
            onPress: () => Alert.alert('施工中ing~')
        },
        {
            title: '朋友圈',
            icon: 'wechat',
            icon_color: globalColor.defaultIconColor_Weixin,
            background_color: globalColor.defaultBackgroundColor_Weixin,
            onPress: () => Alert.alert('施工中ing~')
        },
        {
            title: 'QQ',
            icon: 'qq',
            icon_color: globalColor.defaultIconColor_QQ,
            background_color: globalColor.defaultBackgroundColor_QQ,
            onPress: () => props.Share_qq()
        },
        {
            title: 'QQ空间',
            icon: 'qq',
            icon_color: globalColor.defaultIconColor_QQ,
            background_color: globalColor.defaultBackgroundColor_QQ,
            onPress: () => props.Share_qq_zone()
        },
        {
            title: '新浪',
            icon: 'weibo',
            icon_color: globalColor.defaultIconColor_Weibo,
            background_color: globalColor.defaultBackgroundColor_Weibo,
            onPress: () => Alert.alert('施工中ing~')
        },
        {
            title: '复制链接',
            icon: 'link',
            icon_color: globalColor.defaultBackgroundColor,
            background_color: globalColor.defaultFontColor_dis,
            onPress: () => Share_copyShare_()
        },
    ]
    return (
        <View style={{ flex: 1 }}>
            <ScrollView
                refreshControl={
                    <RefreshControl
                    />
                }
            >
                <Header
                    leftComponent={
                        <Avatar
                            containerStyle={{ borderColor: '#fff', borderWidth: 2 }}
                            rounded
                            source={{ uri: `${login.data.user_pic}` }}
                            size="large"
                        >
                            <Avatar.Accessory {...FontAwesome} size={pxPage(20)} onPress={() => { console.log('??'); }} />
                        </Avatar>
                    }
                    centerComponent={
                        <View>
                            <Text h3>{login.data.user_name}</Text>
                            <Text> uid: {login.data.user_id}</Text>
                        </View>
                    }
                    rightComponent={
                        <Button
                            color='pink'
                            title={props.login.login ? '已登录' : '登录'}
                            onPress={throttle(() => {
                                props.navigation.push('Login')
                            }, 200)}
                        ></Button>
                    }
                    placement="left"
                    backgroundColor={globalColor.defaultColor}
                    containerStyle={{ borderBottomLeftRadius: 25, borderBottomRightRadius: 25 }}
                    elevated={true}
                    statusBarProps={{ barStyle: 'dark-content' }}
                ></Header>
                <View style={[styles.F4, styles.bordershow]}>
                    <F4 list={List} navigation={navigation} />
                </View>
                <View style={[styles.menu_one, styles.bordershow]}>
                    <MyListitem list={List_ListItem} />
                </View>
            </ScrollView>
            <BottomSheet
                isVisible={isVisible}
                modalProps={{ statusBarTranslucent: true, hardwareAccelerated: true, animationType: 'fade', onRequestClose: () => setIsVisible(false), transparent: true }}
            >
                <View style={{ width: '100%', height: pxPage(300), backgroundColor: globalColor.defaultBackgroundColor, borderTopLeftRadius: 15, borderTopRightRadius: 15 }}>
                    <View style={[{ width: '100%', height: '84%', flexWrap: 'wrap', justifyContent: 'flex-start', flexDirection: 'row', alignItems: 'center' },]}>
                        {list3.map((l, i) => (
                            <View key={i} style={{ width: pxPage(70), height: pxPage(70), backgroundColor: l.background_color, borderRadius: 15, marginLeft: pxPage(15), marginRight: pxPage(15), marginTop: pxPage(20), marginBottom: pxPage(20) }} >
                                <Button
                                    onPress={l.onPress}
                                    icon={
                                        <FontAwesome name={l.icon} color={l.icon_color} size={pxPage(30)}></FontAwesome>
                                    }
                                    buttonStyle={{ width: '100%', height: '100%', backgroundColor: null, }}
                                ></Button>
                                <Text style={{ fontSize: pxPage(12), textAlign: 'center', marginTop: pxPage(10) }}>{l.title}</Text>
                            </View>
                        ))}
                    </View>
                    <Button
                        title="取消"
                        buttonStyle={styles.buttonStyle2}
                        onPress={throttle(() => {
                            setIsVisible(false)
                        }, 1000)}
                    ></Button>
                </View>
            </BottomSheet>
        </View>
    )
}

const mapStateToProps = state => ({
    nav: state.nav,
    login: state.login,
    share: state.share
})
const mapDispatchToProps = dispatch => ({
    Share_qq: () => dispatch(Share_qq()),
    Share_qq_zone: () => dispatch(Share_qq_zone())
});
export default connect(mapStateToProps, mapDispatchToProps)(Mine)